<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/login.css"/>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>

</head>
<body>
<!-------------------reg-------------------------->
<div class="reg">
    <form id="registerForm" method="post"  class="layui-form">
        <p>用户名：<input type="text" name="username" id="username"  placeholder="请输入用户名" lay-verify="required|username"></p>
        <p>密码:<input type="password" name="password" id="password"  placeholder="请输入密码" lay-verify="required|password"></p>
        <p>确认密码；<input type="password" name="repassword" id="repassword"  placeholder="请确认密码" lay-verify="required|repassword"></p>
        <p>邮箱：<input type="text" name="email" id="email"  placeholder="请输入邮箱"  lay-verify="email"></p>
        <p>手机号：<input type="text" name="phone" id="telephone"  placeholder="请输入手机号"  lay-verify="phone"></p>
       性别： <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男" checked>
                <input type="radio" name="sex" value="1" title="女">
            </div>
        </div>
        <p><input type="date" name="createTime" id="birthday"  lay-verify="date"></p>
        <p class="txtL txt">
            验证码：<input class="code" type="text" name="checkcode" id="code"  placeholder="验证码" lay-verify="required">
            <img  style="position: relative;left: 10px;bottom: 7px;" id="codeimage" onclick="initCode()">
        </p>
        <p><input type="submit" lay-submit lay-filter="register" value="注册"></p>
        <p class="txt"><a href="login"><span></span>已有账号登录</a></p>
    </form>
</div>


</body>
<script src="/js/jquery-1.12.4.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js" charset="utf-8"></script>
<script>
    layui.use(['laydate', 'form'],function() {
        let form=layui.form;
        form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,password: [
                /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,12}$/
                ,'密码必须6到12位，必须包含字母和数字'
            ],
            repassword : function (value,item) {
                if (value != $("#password").val()){
                    return "两次密码不一致";
                }
            }
        });
    });

    $("#registerForm").submit(function () {
        $.ajax({
            type:'post',
            url: "/user/register",
            data:$("#registerForm").serialize(),
            dataType: "json",
            success: function (data) {
                if (data.code === 200) {
                    layer.confirm('注册成功，请去邮箱激活', {
                        btn: ['好的','稍后去激活'] //按钮
                    }, function(){
                        location.href="/login";
                    }, function(){
                        layer.msg("好的收到");
                    });
                } else {
                    layer.msg(data.message,{offset: '100px',icon:2});
                    initCode();
                }
            }
        });
        return false;
    });

    $(function  () {
        initCode();
    })
    function initCode() {
        $('#codeimage').attr("src","/images/captcha?data=" + new Date().getTime());
    }
</script>
</html>
